<template>
  <div class="tree-container flex-column column-center">
    <el-input
      placeholder="搜索指标"
      v-model="searchVal"
      @input="inputChange"
      @change="needInputChange"
    >
      <i slot="suffix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <div class="history-header flex-row row-between column-center">
      <span>搜索历史记录</span>
      <span @click="clearHistory"><i class="el-icon-delete"></i></span>
    </div>
    <div class="history-list">
      <el-tag
        v-for="(tag,idx) in historyList"
        :key="tag+idx"
        @click="querySearch(tag)"
        style="margin-right: 10px"
      >
        {{ tag }}
      </el-tag>
    </div>
    <div class="tree-box">
      <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        empty-text="请在右侧新建或者导入指标体系"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :current-node-key="currentNodeKey"
        highlight-current
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNodeMethod"
      ></el-tree>
    </div>
  </div>
</template>
<script>
import { debounce } from "@/utils";
export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchVal: "",
      historyList: [],
      currentNodeKey: "",
      treeData: [
        // {
        //   label: "WL系统能力",
        //   id: "1",
        //   children: [
        //     {
        //       label: "业务承载能力",
        //       id: "1-1",
        //       children: [
        //         {
        //           label: "JR能力",
        //           id: "1-1-1",
        //           children: [
        //             {
        //               label: "JR种类",
        //               id: "1-1-1-1",
        //             },
        //             {
        //               label: "JR数量",
        //               id: "1-1-1-2",
        //             },
        //             {
        //               label: "JR时间",
        //               id: "1-1-1-3",
        //             },
        //           ],
        //         },
        //         {
        //           label: "吞吐量保障能力",
        //           id: "1-1-2",
        //         },
        //         {
        //           label: "可靠CS能力",
        //           id: "1-1-3",
        //         },
        //         {
        //           label: "性能保证能力",
        //           id: "1-1-4",
        //         },
        //         {
        //           label: "YW支撑能力",
        //           id: "1-1-5",
        //           children: [
        //             {
        //               label: "典型YW支撑类型",
        //               id: "1-1-5-1",
        //             },
        //             {
        //               label: "YWCS成功率",
        //               id: "1-1-5-2",
        //             },
        //             {
        //               label: "多优先级FW质量保证",
        //               id: "1-1-5-3-1",
        //               children: [
        //                 {
        //                   label: "具备差异化FW保障XY",
        //                   id: "1-1-5-3-2",
        //                 },
        //                 {
        //                   label: "SB是否支持差异化FW...",
        //                   id: "1-1-5-3-3",
        //                 },
        //                 {
        //                   label: "YW管理系统是否支持...",
        //                   id: "1-1-5-3-4",
        //                 },
        //               ],
        //             },
        //           ],
        //         },
        //       ],
        //     },
        //     {
        //       label: "WL构建能力",
        //       id: "1-2",
        //     },
        //     {
        //       label: "KHWC能力",
        //       id: "1-3",
        //     },
        //   ],
        // },
      ],

      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    data: {
      handler(newVal) {
        // console.log(newVal, 'tree---watch');
        this.treeData = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    inputChange() {
      // debounce(this.search, 2000);
      this.search();
    },
    needInputChange() {
      this.search();
      if (this.searchVal && !this.historyList.includes(this.searchVal)) {
        console.log("添加进historyList");
        this.historyList.push(this.searchVal);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
    },
    clearHistory() {
      this.historyList= [];
      localStorage.removeItem("historyList");
    },
    querySearch(val) {
      console.log("快速");
      this.searchVal = val;
      this.search();
    },
    search() {
      // console.log("开始搜索");
      this.$refs.tree.filter(this.searchVal);
    },
    deleteChildren(e){

      let childs =  JSON.parse(JSON.stringify(e));
      for (let i = childs.children.length; i--; i > 0) {
        if (childs.children[i].children) {
          if (childs.children[i].children.pid == e.id) {
            this.deleteChildren(childs.children[i].children)
          } else {
            delete childs.children[i].children
          }
        }
      }
      this.$emit("treeSelect", childs);
    },
    handleNodeClick(e) {
      // if (e.isBottom && e.isBottom === "0") {  // 目前上传excel后返回的数据中  isBottom 全部为null
      if (e.children && e.children.length>0) {
          this.currentNodeKey = e.id;
        // if(!e.pid){
        //   this.$emit("treeSelect", e);
        // }else{
        //   if(e.children.length>0){
            this.deleteChildren(e)
        //   }
        // }
      } else {
        this.$refs.tree.setCurrentKey(this.currentNodeKey);
        return this.$message({
          message: "只能选择非叶子节点",
          type: "warning",
        });
      }
    },
    filterNodeMethod(value, data, node) {
      if (node.label.indexOf(value) > -1) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  mounted() {
    this.historyList = JSON.parse(localStorage.getItem("historyList")) || [];
  },
};
</script>
<style lang="scss" scoped>
.tree-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
  .history-header {
    height: 40px;
    padding: 0 10px;
    span {
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #6d7cab;
    }
    span:last-child {
      cursor: pointer;
    }
  }
  .history-list {
    margin-bottom: 10px;
  }
  .tree-box {
    flex: 1;
    overflow: scroll;
  }
}
</style>
